<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/login4.css"/>
		<link rel="stylesheet" href="css/packagewtt.css" />
		<link rel="stylesheet" href="css/aos.css" />
	</head>
	<body>
		<div class="top-container flex-center">
		  <div class="top flex-center">
			  	<div class="top-item flex-center">
					<img src="images/logo2.png" alt="PRIME-RESEARCH" />
				</div>
				<div class="top-item text-center">
							<a href="#" class="list-item">HOME</a>
							<a href="#" class="list-item">INTRODUCE</a>
							<a href="#" class="list-item">SERVICE</a>
							<a href="#" class="list-item">ABOUT</a>
							<a href="#" class="list-item">LOGIN</a>
				</div>
		 </div>
			
		</div>
		<div class="login-container">
			<div class="header">
				<div class="nav-main">
					<span >Crawler management system</span>
				</div>
			</div><!--header end-->
			
			<div class="login-body flex-center">
				
				<div class="login-body-nav">
					<div class="login-content">
						<span>SIGN UP FOR SYSTEM</span>
						<div class="labels">
							<div class="label-items">
								<label for="userName" class="label-normal">用户名</label>
							    <input type="text" name="" id="userName" value="" class="input-items"/>
							</div>
							<div class="label-items">
								<label for="passWord" class="label-normal">密码</label>
							    <input type="password" name="" id="passWord" value="" class="input-items"/>
							</div>
							<div class="label-items">
								<button class="login-btn">登录</button>
							</div>
						</div>
						
				  </div><!--login-content end-->
				</div><!--login-body-nav end-->
			</div><!--login-body end-->
			
			<div class="show-message flex-center">
				<div class="show-message-items flex-default">
					<div class="show-message-item text-right" aos="fade-up-right">
						<img src="images/bg_1.jpg"/>
					</div>
					<div class="show-message-item text-center" aos="fade-up-left">
						<span>
								<p>Crawler management system</p>
								<p>提供6大类标准数据服务</p>
								<p>网络爬虫（又被称为网页蜘蛛，网络机器人，在FOAF社区中间，更经常的称为网页追逐者），
								是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本。
								另外一些不常使用的名字还有蚂蚁、自动索引、模拟程序或者蠕虫。
								</p>
						</span>
					</div>
				</div>
			</div>
			
			<div class="data-message flex-center">
				<div class="data-message-items flex-default">
					<div class="data-message-item text-right" aos="fade-right">
						<span>
								<p>Crawler management system</p>
								<p>首发数据质量评估标准和数据服务稳定性标准</p>
								<p>网络爬虫（又被称为网页蜘蛛，网络机器人，在FOAF社区中间，更经常的称为网页追逐者），
								是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本。
								另外一些不常使用的名字还有蚂蚁、自动索引、模拟程序或者蠕虫。
								</p>
						</span>
						
						
					</div>
					<div class="data-message-item text-left" aos="fade-left">
						<img src="images/bg_2.jpg"/>
					</div>
				</div>
			</div>
			
			
			
			<div class="more-message flex-center">
				<div class="message-content flex-default">
					<div class="message-items flex-default" aos="fade-up">
						<img src="images/d1.jpg" alt="developer" />
					</div>
					<div class="message-items flex-default" aos="fade-up">
						<img src="images/d1.jpg" alt="developer" />
					</div>
					<div class="message-items flex-default" aos="fade-up">
						<img src="images/d1.jpg" alt="developer" />
					</div>
					
				</div>
			</div>
			
			<div class="login-footer text-center">
				PRIME官方网站 | PRIME微博<br/>
                                版权所有©2015 PRIME研究沪ICP备15013662号-1
			</div>
			
			
			
		</div>
		
		
		<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
		<script src="js/aos.js"></script>
		<script type="text/javascript">
			
		   AOS.init({
			easing: 'ease-out-back',
			duration: 1000
		   });
			
			//鼠标选中效果
			$(".input-items").each(function(){
				this.onfocus = function(){
					
					$(this).siblings("label").removeClass("label-normal").addClass("label-active");
					$(this).css({"border-bottom":"1px solid #3899EC","transition":"all 1s"});
					
				}
			})
			
			
		</script>
		
	</body>
</html>
